import * as echarts from 'echarts';
import {LitElement, html, TemplateResult} from 'lit';
import {customElement, property} from "lit/decorators.js";
import style from '../echarts.css.ts';

export interface LineProps {
    chartId?: string;
    width?: string;
    height?: string;
    color?: string[];
    title?: object;
    tooltip?: object;
    legend?: object;
    grid?: object;
    toolbox?: object;
    smooth?: boolean;
    boundaryGap?: boolean;
    areaStyle?: any[] | any;
    stack?: string;
    emphasis?: object;
    label?: any[] | any;
    lineStyle?: object;
    showSymbol?: boolean;
    xAxisData?: string[];
    seriesData?: number[][] | number[];
}

@customElement('lit-line')
export class LitLine extends LitElement {
    @property({ type: String }) chartId: string = 'lit-line-chart';
    @property({ type: String }) width: string = '600px';
    @property({ type: String }) height: string = '400px';
    @property({ type: Array }) color: string[] | undefined = undefined;
    @property({ type: Object }) title: any = {};
    @property({ type: Object }) tooltip: any = undefined;
    @property({ type: Object }) legend: any = {};
    @property({ type: Object }) grid: any = {};
    @property({ type: Object }) toolbox: any = {};
    @property({ type: Boolean }) smooth: boolean = false;
    @property({ type: Boolean }) boundaryGap: boolean = false;
    @property({ type: Object }) areaStyle: object | undefined = undefined;
    @property({ type: String }) stack: string | undefined = undefined;
    @property({ type: Object }) emphasis: any = {};
    @property({ type: Object }) label: object | undefined = undefined;
    @property({ type: Object }) lineStyle: object | undefined = undefined;
    @property({ type: Boolean }) showSymbol: boolean = false;
    @property({ type: Array }) xAxisData: string[] = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    @property({ type: Array }) seriesData: number[][] = [[150, 230, 224, 218, 135, 147, 260]];

    getSeries(): any[] {
        const legendData = this.legend?.data || [];
        return this.seriesData.map((data, index) => ({
            name: legendData[index] || undefined,
            type: 'line',
            smooth: this.smooth,
            data: data,
            areaStyle: Array.isArray(this.areaStyle) ? this.areaStyle[index] : this.areaStyle,
            stack: this.stack,
            emphasis: this.emphasis,
            label: Array.isArray(this.label) ? this.label[index] : this.label,
            lineStyle: this.lineStyle,
            showSymbol: this.showSymbol,
        }));
    }
    option: echarts.EChartsOption = {
        title: this.title,
        tooltip: this.tooltip,
        legend: this.legend,
        grid: this.grid,
        toolbox: this.toolbox,
        xAxis: {
            type: 'category',
            boundaryGap: this.boundaryGap,
            data: this.xAxisData,
        },
        yAxis: {
            type: 'value'
        },
        series: this.getSeries(),
    };

    static styles = style;

    updated() {
        this.option.color = this.color;
        this.option.title = this.title;
        this.option.tooltip = this.tooltip;
        this.option.legend = this.legend;
        this.option.grid = this.grid;
        this.option.toolbox = this.toolbox;
        (this.option.xAxis as any).data = this.xAxisData;
        (this.option.xAxis as any).boundaryGap = this.boundaryGap;
        this.option.series = this.getSeries();
        this.firstUpdated();
    }

    firstUpdated() {
        const chart = echarts.init(this.shadowRoot!.getElementById(this.chartId)!);
        chart.setOption(this.option);
    }

    render(): TemplateResult {
        return html`<div id="${this.chartId}" style="width: ${this.width}; height: ${this.height};"></div>`;
    }
}

declare global {
    interface HTMLElementTagNameMap {
        'lit-line': LitLine;
    }
}